<template>
  <el-select v-model="bankId" placeholder="请选择" @change="change">
    <el-option
      v-for="item in lst"
      :key="item.id"
      :label="item.bankName"
      :value="item"
    >
      <span style="float: left">{{ item.bankName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.accountName }}</span>
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'SupplierBank',
  props: {
    value: {
      type: Object,
      default: () => { return null }
    },
    supplierId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      lst: [],
      bankId: null
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      const that = this
      const url = that.$http.conf.api.get('wms').url + '/api/sup/bank-info/map/' + that.supplierId
      that.$http.get(url, {}).then((res) => {
        if (res.code !== 200) {
          that.$message.error(res.message)
          return
        }
        that.lst = res.data
      })
    },
    change(item) {
      this.$emit('input', item)
    }
  }
}
</script>
